<template>
    <!-- <ask-auth slim rules="@home:add|remove,@home1,@home2:add.o.p|remove"> -->
    <!--    <ask-auth slim rules="@home">-->
    <!--        <div class="home">-->
    <!--        </div>-->
    <!--    </ask-auth>-->
    <page-box>
        <template v-slot:header>
            <p>概览</p>
        </template>
        <section class="things-container">
            <div class="home-calendar">
                <el-calendar v-model="value"></el-calendar>
            </div>
            <div class="home-things">
                <div class="title">
                    <span :class="{active: activeName === 'today'}" @click="changeTabs('today')">今日待办（1）</span>
                    <span :class="{active: activeName === 'before'}" @click="changeTabs('before')">往日待办（2）</span>
                    <span :class="{active: activeName === 'Expiring'}" @click="changeTabs('Expiring')">即将到期（3）</span>
                    <span :class="{active: activeName === 'notPass'}" @click="changeTabs('notPass')">验收未通过（4）</span>
                </div>
                <div class="things-content" v-if="thingsList.length">
                    <div v-for="(item, index) in thingsList" :key="index" class="things-item">
                        <p>{{ index + 1 }}、{{ item.name }}</p>
                        <el-button size="mini" type="text">前往查看</el-button>
                    </div>
                </div>
                <p class="tips" v-else>所有的待办已经完成了</p>
            </div>
        </section>
        <section class="tool-container">
            <div class="item">
                <div>
                    <i class="el-icon-user-solid"></i>
                </div>
                <p>任务模版</p>
            </div>
            <div class="item">
                <div>
                    <i class="el-icon-folder-add"></i>
                </div>
                <p>创建任务</p>
            </div>
            <div class="item">
                <div>
                    <i class="el-icon-date"></i>
                </div>
                <p>任务管理</p>
            </div>
            <div class="item">
                <div>
                    <i class="el-icon-notebook-2"></i>
                </div>
                <p>统计报表</p>
            </div>
        </section>
        <section class="table-container">
            <el-radio-group class="check-type" v-model="checkType" @change="getTable">
                <el-radio-button label="1">数据分析</el-radio-button>
                <el-radio-button label="2">数据分析</el-radio-button>
                <el-radio-button label="3">数据分析</el-radio-button>
            </el-radio-group>
            <p class="table-title">详细数据</p>
            <el-table
                :data="tableData"
                border
                style="width: 100%">
                <el-table-column
                    prop="date"
                    label="创建时间"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="任务名称"
                    width="240">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="截止时间">
                </el-table-column>
                <el-table-column
                    prop="date"
                    label="进度（条）"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="name"
                    label="任务分类"
                    width="140">
                </el-table-column>
                <el-table-column
                    prop="address"
                    label="状态"
                    width="140">
                </el-table-column>
                <el-table-column
                    label="操作">
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="pageIndex" :limit.sync="pageSize" @pagination="getTable"/>
        </section>
    </page-box>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class Home extends Vue {
    // 日历时间
    value = new Date()
    // 选中事项
    activeName = "today"
    // 事项列表
    thingsList = [
        {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }, {
            id: 1,
            name: "这件事情"
        }
    ]

    checkType = "1"
    // 数据总数
    total = 0;
    // 每页数量
    pageSize = 10;
    // 当前页码
    pageIndex = 1;
    // 表格数据
    tableData = [
        {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
        }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1517 弄'
        }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1519 弄'
        }, {
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1516 弄'
        }
    ]

    // 查询表格
    async getTable() {
        const res = await this.$server["resource/addList"]({
            params: {
                pageSize: this.pageSize,
                pageIndex: this.pageIndex
            }
        });
        if (res.data.code === 200) {
            this.tableData = res.data.data;
            this.total = res.data.total;
        } else {
            this.$message.error(res.data.message || "接口请求错误!");
        }
    }

    changeTabs(val: string) {
        this.activeName = val;
    }
}
</script>
<style lang="scss">
.home {
    width: 100%;
    height: 100%;
    overflow: auto;
}

.things-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;

    .home-calendar {
        width: 4rem;

        .el-calendar-day {
            height: auto;
            text-align: center;
        }
    }

    .home-things {
        border: 1px solid #eee;
        height: 366px;
        width: calc(100% - 4rem);

        .title {
            padding: 10px 20px;

            span {
                display: inline-block;
                margin-right: 20px;
                font-size: 0.14rem;
                line-height: 0.3rem;
                border-bottom: 1px solid transparent;
                cursor: pointer;

                &.active {
                    color: #077BFF;
                    border-color: #077BFF;
                }
            }
        }

        .things-content {
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            height: 315px;
            overflow: auto;

            .things-item {
                width: calc(50% - 3px);
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 20px;
                border-bottom: 1px solid #eee;
                border-right: 1px solid #eee;

                &:nth-child(2n) {
                    border-right: 0;
                }

                &:last-child {
                    border-bottom: 0;
                }

                &:nth-last-child(2) {
                    border-bottom: 0;
                }

                p {
                    font-size: 0.14rem;
                    width: calc(100% - 60px);
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }

                button {
                    font-size: 0.14rem;
                }
            }
        }

        .tips {
            font-size: 0.14rem;
            padding-left: 1.5rem;
            margin-top: 0.5rem;
        }
    }
}

.tool-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #eee;
    padding: 20px;
    .item {
        cursor: pointer;
        div {
            width: 0.56rem;
            height: 0.56rem;
            border-radius: 0.1rem;
            i {
                font-size: 0.3rem;
                line-height: 0.56rem;
                text-align: center;
                display: block;
                color: #fff;
            }
        }
        &:nth-child(1) {
            div {
                background: #067BFF;
            }
        }
        &:nth-child(2) {
            div {
                background: #4EB716;
            }
        }
        &:nth-child(3) {
            div {
                background: #FF8809;
            }
        }
        &:nth-child(4) {
            div {
                background: #5694F2;
            }
        }
    }
    p {
        text-align: center;
        font-size: 0.14rem;
        margin: 10px 0 0 0;
    }
}

.table-container {
    border: 1px solid #eee;
    padding: 20px 20px 0;
    margin-top: 20px;
    .table-title {
        font-size: 0.14rem;
        font-weight: 600;
        border-left: 4px solid $primary--color;
        padding-left: 10px;
    }
}
</style>
